<template>
  <div class="container">
    <div class="header">
      <DateComponent :artInfo="artInfo"></DateComponent>
      <view class="like-share">
        <Like :likeInfo="likeInfo" :artInfo="artInfo"></Like>
        <Share></Share>
      </view>
    </div>
    <Movie v-if="artInfo.type === 100" :artInfo="artInfo"></Movie>
    <Music v-else-if="artInfo.type === 200" :artInfo="artInfo"></Music>
    <Essay v-else-if="artInfo.type === 300" :artInfo="artInfo"></Essay>
    <div class="navigator">
      <Navigator @update-right="updateArtInfo" @update-left="updateArtInfo" :artInfo="artInfo"></Navigator>
    </div>
  </div>
</template>

<script>
import request from '../../utils/request.js'
import DateComponent from '../../components/date/index'
import Like from '../../components/like/index'
import Share from '../../components/share/index'
import Movie from '../../components/movie/index'
import Music from '../../components/music/index'
import Essay from '../../components/essay/index'
import Navigator from '../../components/navigator/index'
export default {
  data () {
    return {
      artInfo: {},
      likeInfo: {} // 点赞信息
    }
  },
  components: { DateComponent, Like, Share, Movie, Music, Navigator, Essay },
  methods: {
    getLatest() {
      request({
        url: 'classic/latest',
      }).then((result) => {
        this.artInfo = result
        // 获取点赞信息，因为是动态变化的，所以不做缓存
        this.getLikeInfo(result)
        // 将最新的数据缓存在本地
        wx.setStorageSync('latestIndex', result.index)
      })
    },
    getLikeInfo(info) {
      const { type, id } = info
      request({
        url: `classic/${type}/${id}/favor`
      }).then((result) => {
        this.likeInfo = result
      })
    },
    updateArtInfo(info) {
      this.artInfo = info
      // 点赞信息不做缓存，因为是是动态改变的
      this.getLikeInfo(info)
    }
  },
  onLoad() {
    // 调用应用实例的方法获取全局数据,在mpvue中只会调用一次
    this.getLatest()
  },
  // 分享操作,必须写在页面中，不能写在组件中，并且必须要和页面的生命周期在同一级，否则会报错
  onShareAppMessage(e) {
    // console.log(e);
  }
}
</script>

<style scoped>
.header {
  padding: 0 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.like-share {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navigator {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
